<template>
    <div class="container">
        <div class="title-img">
            <img
                src="~/assets/images/quizdata/quizdata_title.png"
                alt="问题库"
            />
        </div>
        <div class="search">
            <van-field
                v-model="value"
                label=""
                placeholder="输入搜索词"
                class="search-input"
            />
            <div class="search-but" @click="search">搜索一下</div>
        </div>
        <div class="quiz-lsit">
            <div class="quiz-retrieval">
                <div class="retrieval" @click="typeClick">
                    发布时间
                    <van-icon
                        :name="getFBSJ"
                        size="0.65rem"
                        class="retrieval-icon"
                    />
                </div>
                <div class="retrieval" @click="typeClick2">
                    浏览量
                    <van-icon
                        :name="getFBSJ2"
                        size="0.65rem"
                        class="retrieval-icon"
                    />
                </div>
            </div>
            <router-link
                v-for="(item, index) in recommendList"
                :key="index"
                class="quiz-item"
                :to="`/quizdata/${item.id}.html`"
            >
                <div class="title">{{ item.title }}</div>
                <div class="answer_content">{{ item.answer_content }}</div>
                <div class="time">{{ item.createtime }}</div>
            </router-link>
            <div class="page">
                <van-pagination
                    v-model="page"
                    :total-items="all_count"
                    :show-page-size="3"
                    :items-per-page="limit"
                    force-ellipses
                    @change="changePage"
                />
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { downLoadAPP } from "@/assets/utils/utils.js";
import { get_issue_list } from "@/assets/api/quizData";
import { hightLightText, goTopSmooth } from "@/assets/utils/utils.js";
import { Toast } from "vant";
export default {
    name: "IndexPage",
    async asyncData({ params, query }) {
        let data = {
            recommendList: [],
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/quizdata",
                images: [""],
                title: "小竹财税问题库",
                description:
                    "小竹财税问题库汇集众多关于财税问题及答案，主要解决财税从业人员在工作当中遇到的各种财税问题，免除您筛选、去杂的烦恼，目前已收录了财税问题6万多条。",
                pubDate: "2024-03-14",
                upDate: "2024-03-14",
            },
            all_count: 0,
            page: 1,
            limit: 10,
            type: "timeup",
        };

        if (query.page) {
            data.page = parseInt(query.page);
            data.jsonld["@id"] += "?page=" + data.page;
        }

        const res = await get_issue_list({
            page: data.page,
            pagesize: data.limit,
            cate_id: 0,
            grade_switch: 0,
            type: data.type,
        });
        if (res.code == 1) {
            data.recommendList = res.data;
            if (res.data.length > 0) {
                data.all_count = res.data[0].all_count;
                data.jsonld.pubDate = res.data[0].createtime;
                data.jsonld.upDate = data.jsonld.pubDate;
            }
        }

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: "会计知识专业问答_财税会计知识问答-小竹财税平台",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税小竹财税汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台，让天下没有难懂的财税。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content:
                        "税收法规,会计法规,财税资讯,财税学院,财税工具,财税企服",
                },
            ],
        };
    },
    computed: {
        getFBSJ: function () {
            if (this.type == "timeup")
                return require("~/assets/images/quizdata/sj_down.png");
            else if (this.type == "timedown")
                return require("~/assets/images/quizdata/sj_up.png");
            else return require("~/assets/images/quizdata/sj_none.png");
        },
        getFBSJ2: function () {
            if (this.type == "hotup")
                return require("~/assets/images/quizdata/sj_down.png");
            else if (this.type == "hotdown")
                return require("~/assets/images/quizdata/sj_up.png");
            else return require("~/assets/images/quizdata/sj_none.png");
        },
    },
    data() {
        return {
            value: "",
            downLoadAPP: downLoadAPP,
        };
    },
    mounted() {
        // console.log(this.recommendList);
        this.$nextTick(() => {
            goTopSmooth();
        });
    },
    methods: {
        changePage(page) {
            this.page = page;
            this.$router.push({
                path: `/quizdata?page=${page}`,
            });
            this.aget_issue_list();
        },
        async aget_issue_list() {
            const res = await get_issue_list({
                page: this.page,
                pagesize: this.limit,
                cate_id: 0,
                grade_switch: 0,
                type: this.type,
            });
            if (res.code == 1) {
                this.recommendList = res.data;
                if (res.data.length > 0) {
                    this.all_count = res.data[0].all_count;
                }
                this.$nextTick(() => {
                    goTopSmooth();
                });
            }
        },

        search() {
            if (!this.value) {
                Toast("请输入搜索内容");
                return;
            }
            this.$router.push({
                path: `/quizdata/search?k=${this.value}`,
            });
        },

        typeClick() {
            if (this.type == "timeup") this.type = "timedown";
            else this.type = "timeup";
            this.aget_issue_list();
        },

        typeClick2() {
            if (this.type == "hotup") this.type = "hotdown";
            else this.type = "hotup";
            this.aget_issue_list();
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    background-color: #f6f6f6;
}
.title-img {
    padding-top: 1.75rem;
    background-color: #ffffff;
    img {
        width: 12.37rem;
        height: auto;
        margin: 0 auto;
        display: block;
    }
}

.search {
    background-color: #ffffff;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .search-input {
        border: 2px solid #1c87f3;
        border-radius: 6px 0 0 6px;
        width: 15.62rem;
    }
    .search-but {
        border-radius: 0 6px 6px 0;
        background: #1c87f3;
        width: 4.81rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        font-size: 0.81rem;
        color: #ffffff;
    }
}

.quiz-lsit {
    background-color: #ffffff;
}

.quiz-retrieval {
    display: flex;
    margin-top: 0.38rem;
    padding: 1.31rem 1rem;
    .retrieval {
        font-size: 0.75rem;
        color: #666666;
        margin-right: 1.87rem;
    }
}

.quiz-item {
    padding: 1.1rem 0 1rem;
    width: 92%;
    margin: 0 auto;
    border-bottom: 1px solid #e7e7e7;
    display: block;
    .title {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 这里设置你希望显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
        font-size: 0.96rem;
        color: #3d3d3d;
        line-height: 1.5;
    }
    .answer_content {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 这里设置你希望显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 350;
        font-size: 0.687rem;
        color: #666666;
        line-height: 1.5;
        margin: 0.5rem 0;
    }
    .time {
        font-weight: 350;
        font-size: 0.687rem;
        color: #999999;
        text-align: right;
    }
}

.page {
    padding: 1rem 0;
}
</style>
